<template>
	<view class="order-detail-page">

		<scroll-view class="detail-content" scroll-y>
			<!-- 订单状态 -->
			<view class="status-section" v-if="orderInfo.id">
				<view class="status-box" :class="'status-' + orderInfo.state">
					<text class="status-text">{{ getStatusText(orderInfo.state) }}</text>
					<text class="status-desc"
						v-if="getStatusDesc(orderInfo.state)">{{ getStatusDesc(orderInfo.state) }}</text>
					<text class="countdown" v-if="countdown">{{ countdown }}</text>
				</view>
				<view class="img-box">
					<image class="img-tip" :src="getStatusTextImg(orderInfo.state)"></image>
				</view>
			</view>

			<!-- 物流信息 -->
			<view class="logistics-section" v-if="orderInfo.state == 2 && logisticsInfo.context">
				<view class="section-header" @click="viewLogistics">
					<view class="header-left">
						<text class="header-title">物流信息</text>
					</view>
					<view class="header-right">
						<text class="logistics-status">{{ logisticsInfo.context }}</text>
						<text class="arrow">></text>
					</view>
				</view>
				<view class="logistics-info">
					<text class="logistics-time">{{ logisticsInfo.ftime }}</text>
				</view>
			</view>

			<!-- 收货地址 -->
			<view class="address-section" v-if="orderInfo.customer_name">
				<view class="address-info">
					<view class="address-user">
						<text class="user-name">收货人: {{ orderInfo.customer_name }}</text>
						<text class="user-phone">{{ orderInfo.customer_tel }}</text>
					</view>
					<text class="address-detail">收货地址: {{ orderInfo.address }}</text>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="goods-section" v-if="orderInfo.lists && orderInfo.lists.length">
				<view class="section-header">
					<view class="store-info">
						<image src="/static/icons/icon-dianpu@2x.png" class="store-icon"></image>
						<text class="store-name">{{ orderInfo.manufac_name }}</text>
						<u-icon name="arrow-right" size="20" color="#999"></u-icon>
					</view>
				</view>
				<view class="goods-list">
					<view class="goods-item" v-for="goods in orderInfo.lists" :key="goods.id">
						<image :src="baseUrl+goods.file_path" class="goods-image" mode="aspectFill"></image>
						<view class="goods-info">
							<text class="goods-title">{{ goods.goods_name }}</text>
							<text class="goods-spec" v-if="goods.goods_spec">{{ goods.goods_spec }}</text>
							<view class="express-info" v-if="orderInfo.state == 2 && goods.express_name">
								<text class="express-link" @click="viewLogistics">查看物流</text>
							</view>
						</view>
						<view class="goods-price-info">
							<text class="price">¥{{ goods.goods_price }}</text>
							<text class="rebate">分润:¥{{ goods.rebate }}</text>
							<text class="quantity">×{{ goods.goods_num }}</text>
							<view class="refund-btn" v-if="getRefundBtnText(goods, orderInfo.state)"
								:class="getRefundBtnClass(goods.refund_state)" @click="handleRefund(goods)">
								<text class="btn-text">{{ getRefundBtnText(goods, orderInfo.state) }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="profit-info">
					<text class="profit-text">分润:¥{{ orderInfo.rebate_amount }}</text>
				</view>
			</view>

			<!-- 费用明细 -->
			<view class="amount-section" v-if="orderInfo.id">
				<view class="amount-header">
					<text class="goods-count">共{{ orderInfo.goods_total_num }}件商品</text>
				</view>
				<view class="amount-info">
					<view class="amount-item">
						<text class="amount-label">运费(快递)</text>
						<text class="amount-value">¥{{ orderInfo.freight || '0.00' }}</text>
					</view>
					<view class="amount-item">
						<text class="amount-label">商品金额</text>
						<text class="amount-value">¥{{ orderInfo.pay_amount }}</text>
					</view>
					<view class="amount-item total">
						<text class="amount-label">实付费用</text>
						<text class="amount-value">¥{{ orderInfo.pay_amount }}</text>
					</view>
				</view>

				<!-- 客服联系 -->
				<view class="service-section">
					<view class="service-item" @click="contactService">
						<image :src="serverAddress+'img/microphone.png'" class="img-tip"></image>
						<text class="service-text">联系客服</text>
					</view>
					<view class="service-item" @click="callPhone">
						<image :src="serverAddress+'img/tel.png'" class="img-tip"></image>
						<text class="service-text">拨打电话</text>
					</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-section" v-if="orderInfo.id">
				<view class="order-info">
					<view class="info-item order-no">
						<text class="info-label">订单编号: {{ orderInfo.order_num }}</text>
						<view class="copy-btn" @click="copyOrderNo">
							<text class="copy-text">复制</text>
						</view>
					</view>
					<view class="info-item" v-for="item in getOrderDetails()" :key="item.label">
						<text class="info-text">{{ item.label }}: {{ item.value }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-actions" v-if="getOrderActions().length">
			<view class="action-btn" :class="action.type" v-for="action in getOrderActions()" :key="action.type"
				@click="handleAction(action.type)">
				<text class="btn-text">{{ action.text }}</text>
			</view>
		</view>

		<!-- 支付方式弹窗 -->
		<view class="pay-modal" v-if="showPayModal" @click="hidePayModal">
			<view class="pay-content" @click.stop>
				<view class="pay-header">
					<view class="close-btn" @click="hidePayModal">×</view>
					<text class="pay-title">确认付款</text>
					<text class="pay-amount">¥{{ orderInfo.pay_amount }}</text>
				</view>
				<view class="pay-methods">
					<view class="pay-method" @click="showPayPassword('余额支付')">
						<text class="method-name">账户余额</text>
						<text class="balance-amount">¥{{ userBalance }}</text>
					</view>
					<view class="pay-method" @click="wechatPay">
						<text class="method-name">微信支付</text>
						<text class="arrow">></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 支付密码弹窗 -->
		<view class="password-modal" v-if="showPasswordModal" @click="hidePasswordModal">
			<view class="password-content" @click.stop>
				<view class="password-header">
					<view class="back-btn" @click="hidePasswordModal">
						<image src="/static/icon-close.png" class="back-icon"></image>
					</view>
					<text class="password-title">{{ passwordTitle }}</text>
				</view>
				<view class="password-body">
					<text class="password-desc">请输入支付密码</text>
					<view class="password-input">
						<input type="password" v-model="payPassword" maxlength="6" @input="onPasswordInput" />
					</view>
				</view>
			</view>
		</view>
		<!-- 客服电话弹窗 -->
		<u-modal :show="showCustomerService" content="客服电话 : 010-65776071" :showCancelButton="true" :confirm-text="'拨打'"
			@confirm="makePhoneCall()" @cancel="showCustomerService=false"></u-modal>
	</view>
</template>

<script>
	import {
		orderApi,
		paymentApi
	} from '@/api/index.js'
	import {
		getToken
	} from '@/api/auth.js'
	import md5 from 'md5'
	import {
		inject
	} from 'vue'

	export default {
		data() {
			return {
				baseUrl: inject('$baseUrl'),
				serverAddress: inject('$serverAddress', ''), // 提供默认值
				orderId: '',
				orderInfo: {},
				logisticsInfo: {},
				userBalance: '0.00',
				countdown: '',
				countdownTimer: null,
				// 客服弹窗状态
				showCustomerService: false,
				// 弹窗状态
				showPayModal: false,
				showPasswordModal: false,
				passwordTitle: '检验支付密码',
				payPassword: '',
				payMethod: ''
			}
		},

		onLoad(options) {
			if (options.orderid || options.id) {
				this.orderId = options.orderid || options.id
				this.loadOrderDetail()
				this.getUserBalance()
			}
		},

		onUnload() {
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer)
			}
		},

		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 加载订单详情
			async loadOrderDetail() {
				try {
					uni.showLoading({
						title: '加载中...'
					})

					const res = await orderApi.getOrderDetail({
						order_id: this.orderId
					})

					if (res.r === 0) {
						this.orderInfo = res.data

						// 如果是待收货状态，启动15天倒计时
						if (this.orderInfo.state == 2 && this.orderInfo.deliv_time) {
							this.startFifteenDayCountdown()
						}

						// 如果是待付款状态，启动付款倒计时
						if (this.orderInfo.state == 0 && this.orderInfo.deadline) {
							this.startPaymentCountdown()
						}

						// 如果是已发货状态，获取物流信息
						if (this.orderInfo.state == 2) {
							this.getLogisticsInfo()
						}
					} else {
						uni.showToast({
							title: res.msg || '获取订单详情失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('获取订单详情失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 获取物流信息
			async getLogisticsInfo() {
				try {
					// 根据HTML源码，使用 home/delivery_info/query_delivery 接口
					const res = await orderApi.getLogisticsInfo({
						order_num: this.orderInfo.order_num
					})
					if (res.r === 0 && res.data.lists && res.data.lists.length) {
						this.logisticsInfo = {
							context: res.data.lists[0].context || '暂无物流信息',
							ftime: res.data.lists[0].ftime || ''
						}
					} else {
						// 如果没有物流信息，设置为空
						this.logisticsInfo = {
							context: '暂无物流信息',
							ftime: ''
						}
					}
				} catch (error) {
					console.error('获取物流信息失败:', error)
					this.logisticsInfo = {
						context: '暂无物流信息',
						ftime: ''
					}
				}
			},

			// 获取用户余额
			async getUserBalance() {
				try {
					const res = await paymentApi.getUserBalance()
					if (res.r === 0) {
						this.userBalance = res.data.money || '0.00'
					}
				} catch (error) {
					console.error('获取用户余额失败:', error)
				}
			},

			// 启动15天确认收货倒计时
			startFifteenDayCountdown() {
				const delivTime = new Date(this.orderInfo.deliv_time).getTime()
				const limitedTime = delivTime + 15 * 24 * 60 * 60 * 1000 // 15天

				this.countdownTimer = setInterval(() => {
					const now = new Date().getTime()
					const remains = limitedTime - now

					if (remains <= 0) {
						clearInterval(this.countdownTimer)
						this.countdown = ''
						return
					}

					const days = Math.floor(remains / (24 * 60 * 60 * 1000))
					const hours = Math.floor((remains % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))
					const minutes = Math.floor((remains % (60 * 60 * 1000)) / (60 * 1000))

					this.countdown = `还剩下${days}天${hours}小时${minutes}分自动确认收货`
				}, 1000)
			},

			// 启动付款倒计时
			startPaymentCountdown() {
				this.countdownTimer = setInterval(() => {
					const now = new Date().getTime()
					const deadline = new Date(this.orderInfo.deadline).getTime()
					const remains = Math.floor((deadline - now) / 1000)

					if (remains <= 0) {
						clearInterval(this.countdownTimer)
						this.countdown = ''
						// 时间到后自动关闭订单，更新状态
						this.orderInfo.state = 11 // 交易关闭
						// 隐藏底部按钮
						// 刷新页面状态
						this.loadOrderDetail()
						return
					}

					const minutes = Math.floor(remains / 60)
					const seconds = remains % 60

					const formatMinutes = minutes < 10 ? '0' + minutes : minutes
					const formatSeconds = seconds < 10 ? '0' + seconds : seconds

					this.countdown = `00:${formatMinutes}:${formatSeconds} 时间到后将自动关闭订单`
				}, 1000)
			},



			// 获取状态文本
			getStatusText(state) {
				const statusMap = {
					0: '等待买家付款',
					1: '等待厂家发货',
					2: '等待买家收货',
					3: '交易完成',
					10: '交易完成',
					11: '交易关闭',
					12: '交易关闭',
					13: '交易关闭',
					14: '交易关闭',
					15: '交易关闭'
				}
				return statusMap[state] || '未知状态'
			},

			// 获取状态文本对应的图片
			getStatusTextImg(state) {
				const statusMap = {
					0: this.serverAddress + 'img/portfolio.png',
					1: this.serverAddress + 'img/image4@3x.png',
					2: this.serverAddress + 'img/image1@3x.png',
					3: this.serverAddress + 'img/image2@3x.png',
					10: this.serverAddress + 'img/image2@3x.png',
					11: this.serverAddress + 'img/image3@3x.png',
					12: this.serverAddress + 'img/image3@3x.png',
					13: this.serverAddress + 'img/image3@3x.png',
					14: this.serverAddress + 'img/image3@3x.png',
					15: this.serverAddress + 'img/image3@3x.png'
				}
				return statusMap[state] || this.serverAddress + 'img/portfolio.png'
			},

			// 获取状态描述
			getStatusDesc(state) {
				const descMap = {
					0: '请尽快完成支付',
					1: '商家正在准备发货',
					2: '商品正在配送中，请耐心等待',
					3: '感谢您的购买',
					10: '感谢您的购买'
				}
				return descMap[state] || ''
			},

			// 获取订单详情信息
			getOrderDetails() {
				const details = []

				if (this.orderInfo.created) {
					details.push({
						label: '创建时间',
						value: this.orderInfo.created
					})
				}

				if (this.orderInfo.trade_no && this.orderInfo.state >= 1) {
					details.push({
						label: '交易编号',
						value: this.orderInfo.trade_no
					})
				}

				if (this.orderInfo.pay_time && this.orderInfo.state >= 1) {
					details.push({
						label: '付款时间',
						value: this.formatTime(this.orderInfo.pay_time)
					})
				}

				if (this.orderInfo.deliv_time && this.orderInfo.state >= 2) {
					details.push({
						label: '发货时间',
						value: this.orderInfo.deliv_time
					})
				}

				if (this.orderInfo.ended && (this.orderInfo.state >= 11 && this.orderInfo.state <= 15)) {
					details.push({
						label: '关闭时间',
						value: this.orderInfo.ended
					})
				}

				return details
			},

			// 格式化时间戳
			formatTime(timestamp) {
				const date = new Date(timestamp * 1000)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')

				return `${year}-${month}-${day}   ${hours}:${minutes}:${seconds}`
			},

			// 获取退款按钮文本
			getRefundBtnText(goods, orderState) {
				// 转换为数字类型，确保判断正确
				const state = Number(orderState)
				
				// 待付款状态不显示单个商品的退款按钮
				if (state === 0) {
					return ''
				}
				
				// 已关闭的订单状态（11-15）不显示退款按钮
				if (state >= 11 && state <= 15) {
					return ''
				}
				
				const refundState = Number(goods.refund_state)
				
				if (refundState === 1) {
					return '退款中'
				} else if (refundState === 3) {
					return '已退款'
				} else if (refundState === 4) {
					return '拒绝退款'
				} else if (refundState === 0) {
					if (state === 1) {
						return '' // 待发货状态不显示退款按钮
					} else if (state === 2 || state === 3 || state === 10) {
						// 待收货、已完成状态显示退货/退款按钮
						return '退货/退款'
					}
				}
				return ''
			},

			// 获取退款按钮样式类
			getRefundBtnClass(refundState) {
				if (refundState == 1 || refundState == 3 || refundState == 4) {
					return 'disabled'
				}
				return ''
			},

			// 获取订单操作按钮
			getOrderActions() {
				const actions = []

				// 如果订单中有商品正在退款中，且状态为待发货，隐藏底部按钮
				if (this.orderInfo.state == 1 && this.orderInfo.lists) {
					const hasRefunding = this.orderInfo.lists.some(goods => goods.refund_state == 1)
					if (hasRefunding) {
						return [] // 隐藏底部按钮
					}
				}

				switch (this.orderInfo.state) {
					case 0: // 待付款
						actions.push({
							type: 'cancel',
							text: '取消订单'
						}, {
							type: 'pay',
							text: '付款'
						})
						break
					case 1: // 待发货
						actions.push({
							type: 'refund',
							text: '申请退款'
						})
						break
					case 2: // 待收货
						actions.push({
							type: 'confirm',
							text: '确认收货'
						})
						break
					case 3: // 已完成
					case 10:
						// 已完成状态不显示操作按钮（根据H5源代码）
						break
					default: // 已关闭
						actions.push({
							type: 'delete',
							text: '删除订单'
						})
						break
				}

				return actions
			},

			// 处理订单操作
			handleAction(type) {
				switch (type) {
					case 'cancel':
						this.cancelOrder()
						break
					case 'pay':
						this.showPayModal = true
						break
					case 'refund':
						this.applyRefund()
						break
					case 'confirm':
						this.confirmReceive()
						break
					case 'delete':
						this.deleteOrder()
						break
					case 'buyAgain':
						this.buyAgain()
						break
				}
			},
			
			// 再次购买
			async buyAgain() {
				try {
					if (!this.orderInfo.id) {
						uni.showToast({
							title: '订单信息不存在',
							icon: 'none'
						})
						return
					}

					uni.showLoading({
						title: '添加中...'
					})

					const result = await orderApi.buyAgain({
						order_id: this.orderInfo.id
					})

					uni.hideLoading()

					if (result.r === 0) {
						uni.showToast({
							title: '已加入购物车',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: result.msg || '添加失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.hideLoading()
					console.error('再次购买失败:', error)
					uni.showToast({
						title: '网络异常，请重试',
						icon: 'none'
					})
				}
			},

			// 处理单个商品退款
			handleRefund(goods) {
				if (goods.refund_state != 0) return

				uni.navigateTo({
					url: `/pages/order/refund?orderId=${goods.id}&orderNum=${this.orderInfo.order_num}&mainId=${this.orderInfo.id}`
				})
			},

			// 取消订单
			async cancelOrder() {
				try {
					uni.showModal({
						title: '取消订单',
						content: '确定要取消这个订单吗？',
						success: async (res) => {
							if (res.confirm) {
								const result = await orderApi.cancelOrder({
									order_id: this.orderId
								})

								if (result.r === 0) {
									uni.showToast({
										title: '订单已取消',
										icon: 'success'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								} else {
									uni.showToast({
										title: result.msg || '取消失败',
										icon: 'none'
									})
								}
							}
						}
					})
				} catch (error) {
					console.error('取消订单失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				}
			},

			// 申请退款
			applyRefund() {
				uni.navigateTo({
					url: `/pages/order/refund?orderId=${this.orderId}`
				})
			},

			// 确认收货
			async confirmReceive() {
				try {
					uni.showModal({
						title: '确认收货',
						content: '确认已收到商品吗？',
						success: async (res) => {
							if (res.confirm) {
								const result = await orderApi.confirmOrder({
									order_id: this.orderId
								})

								if (result.r === 0) {
									uni.showToast({
										title: '确认收货成功',
										icon: 'success'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								} else {
									uni.showToast({
										title: result.msg || '确认收货失败',
										icon: 'none'
									})
								}
							}
						}
					})
				} catch (error) {
					console.error('确认收货失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				}
			},

			// 删除订单
			async deleteOrder() {
				try {
					uni.showModal({
						title: '删除订单',
						content: '确定要删除这个订单吗？',
						success: async (res) => {
							if (res.confirm) {
								// 这里需要调用删除订单接口
								// const result = await orderApi.deleteOrder({
								// 	order_id: this.orderId
								// })

								uni.showToast({
									title: '订单已删除',
									icon: 'success'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
						}
					})
				} catch (error) {
					console.error('删除订单失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				}
			},

			// 隐藏支付弹窗
			hidePayModal() {
				this.showPayModal = false
			},

			// 显示支付密码弹窗
			async showPayPassword(method) {
				this.payMethod = method
				this.hidePayModal()

				try {
					// 检查是否已设置支付密码
					const res = await paymentApi.checkPayPassword()
					if (res.data.is_set == 1) {
						this.passwordTitle = '请输入支付密码'
					} else {
						this.passwordTitle = '设置支付密码'
					}

					this.showPasswordModal = true
					this.payPassword = ''
				} catch (error) {
					console.error('检查支付密码失败:', error)
				}
			},

			// 隐藏支付密码弹窗
			hidePasswordModal() {
				this.showPasswordModal = false
				this.payPassword = ''
			},

			// 支付密码输入处理
			async onPasswordInput() {
				if (this.payPassword.length < 6) return

				// 验证密码格式
				if (!/^\d{6}$/.test(this.payPassword)) {
					uni.showToast({
						title: '支付密码由六位数字组成',
						icon: 'none'
					})
					this.payPassword = ''
					return
				}

				try {
					// 验证支付密码
					const res = await paymentApi.verifyPayPassword({
						pay_pwd: md5(this.payPassword)
					})

					if (res.r === 0) {
						// 密码正确，执行支付
						await this.executeBalancePay()
					} else {
						uni.showToast({
							title: res.msg || '密码错误',
							icon: 'none'
						})
						this.payPassword = ''
					}
				} catch (error) {
					console.error('验证支付密码失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
					this.payPassword = ''
				}
			},

			// 执行余额支付
			async executeBalancePay() {
				try {
					const res = await paymentApi.balancePay({
						order_num: this.orderInfo.order_num,
						type: 2,
						is_father_order: 2
					})

					if (res.r === 0) {
						this.hidePasswordModal()
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						})

						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/order/pay-success?type=余额支付&amount=${this.orderInfo.pay_amount}`
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg || '支付失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('余额支付失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				}
			},

			// 微信支付
			async wechatPay() {
				this.hidePayModal()

				try {
					const openid = uni.getStorageSync('openid')
					const res = await paymentApi.wechatPay({
						order_num: this.orderInfo.order_num,
						source: 5,
						type: 2,
						is_father_order: 2,
						openid: openid
					})

					if (res.r === 0) {
						// 调用微信支付
						this.callWechatPay(res.data)
					} else {
						uni.showToast({
							title: res.msg || '支付失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('微信支付失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				}
			},

			// 调用微信支付
			callWechatPay(payData) {
				// 这里需要根据实际环境调用微信支付
				// 在H5环境中需要使用微信JSSDK
				// 在小程序环境中使用uni.requestPayment

				// #ifdef H5
				if (typeof WeixinJSBridge !== 'undefined') {
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
						appId: payData.appId,
						timeStamp: String(payData.timeStamp),
						nonceStr: payData.nonceStr,
						package: payData.package,
						signType: payData.signType,
						paySign: payData.paySign
					}, (res) => {
						if (res.err_msg === 'get_brand_wcpay_request:ok') {
							uni.navigateTo({
								url: `/pages/order/pay-success?type=微信支付&amount=${this.orderInfo.pay_amount}`
							})
						} else {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						}
					})
				}
				// #endif

				// #ifdef MP-WEIXIN
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(payData.timeStamp),
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success: () => {
						uni.navigateTo({
							url: `/pages/order/pay-success?type=微信支付&amount=${this.orderInfo.pay_amount}`
						})
					},
					fail: () => {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				})
				// #endif
			},

			// 查看物流
			viewLogistics() {
				uni.navigateTo({
					url: `/pages/order/logistics?orderNum=${this.orderInfo.order_num}`
				})
			},

			// 复制订单号
			copyOrderNo() {
				uni.setClipboardData({
					data: this.orderInfo.order_num,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					}
				})
			},

			// 联系客服
			contactService() {
				this.showCustomerService = true
			},
			// 拨打客服电话
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '010-65776071',
					success: () => {
						console.log('拨打电话成功')
					},
					fail: (err) => {
						console.error('拨打电话失败:', err)
						uni.showToast({
							title: '拨打失败',
							icon: 'none'
						})
					}
				})
				this.showCustomerService = false
			},

			// 拨打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '01065776071'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}


	.detail-content {
		flex: 1;
		padding-bottom: 100rpx;
	}

	// 公共样式
	.section-header {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #f8f8f8;
	}

	.arrow {
		font-size: 32rpx;
		color: #999;
	}

	.img-tip {
		width: 100rpx;
		height: 100rpx;
	}

	// 订单状态样式
	.status-section {
		background-color: #fff;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.status-box {
			width: 100%;
			padding: 40rpx;
			margin-left: 30rpx;

			.status-text {
				font-size: 36rpx;
				font-weight: 500;
				display: block;
				margin-bottom: 16rpx;
			}

			.status-desc {
				font-size: 28rpx;
				opacity: 0.9;
				display: block;
				margin-bottom: 16rpx;
			}

			.countdown {
				font-size: 24rpx;
				opacity: 0.8;
				display: block;
			}
		}

		.img-box {
			width: 100rpx;
			height: 100rpx;
			margin-right: 50rpx;
			flex-shrink: 0;
		}
	}

	// 物流信息样式
	.logistics-section {
		background-color: #fff;
		margin-bottom: 20rpx;

		.section-header {
			.header-left {
				display: flex;
				align-items: center;
				gap: 16rpx;
			}

			.header-right {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.logistics-status {
					font-size: 28rpx;
					color: #27B387;
				}
			}

			.header-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}
		}

		.logistics-info {
			padding: 30rpx;
			border-top: 2rpx solid #f8f8f8;

			.logistics-time {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	// 收货地址样式
	.address-section {
		background-color: #fff;
		margin-bottom: 20rpx;

		.address-info {
			padding: 30rpx;

			.address-user {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;

				.user-name {
					font-size: 28rpx;
					color: #333;
				}

				.user-phone {
					font-size: 28rpx;
					color: #666;
				}
			}

			.address-detail {
				font-size: 24rpx;
				color: #666;
				line-height: 1.5;
			}
		}
	}

	// 商品信息样式
	.goods-section {
		background-color: #fff;
		margin-bottom: 20rpx;

		.section-header {
			.store-info {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.store-icon {
					width: 40rpx;
					height: 40rpx;
				}

				.store-name {
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.goods-list {
			.goods-item {
				display: flex;
				gap: 24rpx;
				padding: 30rpx;
				border-bottom: 2rpx solid #f8f8f8;

				&:last-child {
					border-bottom: none;
				}

				.goods-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					flex-shrink: 0;
				}

				.goods-info {
					flex: 1;

					.goods-title {
						font-size: 28rpx;
						color: #333;
						line-height: 1.4;
						margin-bottom: 8rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						overflow: hidden;
					}

					.goods-spec {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 16rpx;
					}

					.express-info {
						.express-link {
							font-size: 24rpx;
							color: #27B387;
							text-decoration: underline;
						}
					}
				}

				.goods-price-info {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: space-between;
					min-width: 160rpx;

					.price {
						font-size: 32rpx;
						color: #ff4757;
						font-weight: 500;
					}

					.rebate {
						font-size: 24rpx;
						color: #ff4757;
					}

					.quantity {
						font-size: 24rpx;
						color: #999;
					}

					.refund-btn {
						margin-top: 16rpx;
						padding: 8rpx 16rpx;
						border: 2rpx solid #ff4757;
						border-radius: 8rpx;
						background-color: #fff;
						display: flex;
						align-items: center;

						&.disabled {
							border-color: #ccc;
							background-color: #f5f5f5;

							.btn-text {
								color: #999;
							}
						}

						.btn-text {
							font-size: 20rpx;
							color: #ff4757;
							line-height: 20rpx;
						}
					}
				}
			}
		}

		.profit-info {
			padding: 30rpx;
			text-align: right;
			border-top: 2rpx solid #f8f8f8;

			.profit-text {
				border: 2rpx solid #ff4757;
				border-radius: 10rpx;
				padding: 10rpx 40rpx;
				font-size: 28rpx;
				color: #ff4757;
				font-weight: 500;
			}
		}
	}

	// 费用明细样式
	.amount-section {
		background-color: #fff;
		margin-bottom: 20rpx;

		.amount-header {
			padding: 30rpx;
			border-bottom: 2rpx solid #f8f8f8;

			.goods-count {
				font-size: 28rpx;
				color: #666;
			}
		}

		.amount-info {
			padding: 0 30rpx;

			.amount-item {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&.total {
					border-top: 2rpx solid #f0f0f0;
					margin-top: 16rpx;
					padding-top: 16rpx;

					.amount-label {
						font-weight: 600;
					}

					.amount-value {
						font-size: 32rpx;
						font-weight: 700;
						color: #ff4757;
					}
				}

				.amount-label {
					font-size: 28rpx;
					color: #666;
				}

				.amount-value {
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.service-section {
			border-top: 2rpx solid #f8f8f8;
			padding: 0 30rpx;
			display: flex;

			.service-item {
				flex: 1;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 2rpx solid #f8f8f8;

				&:last-child {
					border-right: none;
				}

				.img-tip {
					width: 40rpx;
					height: 40rpx;
				}

				.service-text {
					margin-left: 40rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

	// 订单信息样式
	.order-section {
		background-color: #fff;
		margin-bottom: 20rpx;

		.order-info {
			padding: 30rpx;

			.info-item {
				margin-bottom: 24rpx;

				&.order-no {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 24rpx;
					border-bottom: 2rpx solid #f8f8f8;

					.info-label {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
					}

					.copy-btn {
						padding: 8rpx 16rpx;
						border: 2rpx solid #9e9e9e;
						border-radius: 8rpx;
						background-color: #fff;

						.copy-text {
							font-size: 24rpx;
							color: #9e9e9e;
						}
					}
				}

				.info-text {
					font-size: 24rpx;
					color: #666;
					line-height: 1.5;
				}
			}
		}
	}

	// 底部操作栏
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #fff;
		border-top: 2rpx solid #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 30rpx;
		padding-bottom: calc(env(safe-area-inset-bottom));
		gap: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 999;

		.action-btn {
			height: 64rpx;
			padding: 0 40rpx;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 160rpx;
			border: none;

			.btn-text {
				font-size: 28rpx;
			}

			&.cancel,
			&.refund {
				background-color: #e5e5e5;

				.btn-text {
					color: #666;
				}
			}

			&.pay,
			&.confirm,
			&.delete {
				background: linear-gradient(135deg, #FF8033 0%, #FF6B35 100%);

				.btn-text {
					color: #fff;
					font-weight: 500;
				}
			}
		}
	}

	// 支付弹窗样式
	.pay-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 1000;

		.pay-content {
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;

			.pay-header {
				padding: 40rpx 30rpx;
				text-align: center;
				border-bottom: 2rpx solid #f0f0f0;
				position: relative;

				.close-btn {
					position: absolute;
					top: 30rpx;
					right: 30rpx;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 48rpx;
					color: #999;
				}

				.pay-title {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 16rpx;
					display: block;
				}

				.pay-amount {
					font-size: 48rpx;
					color: #ff4757;
					font-weight: bold;
				}
			}

			.pay-methods {
				padding: 40rpx 30rpx;

				.pay-method {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;
					border: 2rpx solid #f0f0f0;
					border-radius: 16rpx;
					margin-bottom: 24rpx;
					background-color: #fff;

					&:last-child {
						margin-bottom: 0;
					}

					.method-name {
						font-size: 32rpx;
						color: #333;
					}

					.balance-amount {
						font-size: 28rpx;
						color: #27B387;
					}

					.arrow {
						font-size: 32rpx;
						color: #999;
					}
				}
			}
		}
	}

	// 支付密码弹窗样式
	.password-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1001;

		.password-content {
			width: 90%;
			max-width: 640rpx;
			background-color: #fff;
			border-radius: 24rpx;
			overflow: hidden;

			.password-header {
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				border-bottom: 2rpx solid #f0f0f0;
				position: relative;

				.back-btn {
					.back-icon {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.password-title {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}
			}

			.password-body {
				padding: 60rpx 40rpx;
				text-align: center;

				.password-desc {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 40rpx;
				}

				.password-input {
					input {
						width: 100%;
						height: 100rpx;
						border: 2rpx solid #e0e0e0;
						border-radius: 16rpx;
						padding: 0 30rpx;
						font-size: 36rpx;
						text-align: center;
						letter-spacing: 16rpx;

						&:focus {
							border-color: #27B387;
							outline: none;
						}
					}
				}
			}
		}
	}

</style>